<script setup lang="ts">
interface anyObj {
  [propname: string]: any;
}
const props = defineProps({
  title: String,
  titleModifiers: {
    default: (): anyObj => ({}),
  },
});

const emit = defineEmits(['update:title']);
/* 
  事件类型 统一定义为 Event
*/
function emitValue(e: Event) {
  let value = (e.target as HTMLInputElement).value;
  if (props.titleModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1);
  }
  emit('update:title', value);
}
</script>

<template>
  <input type="text" :value="title" @input="emitValue" />
</template>
